<template>
  <div class="next-week">
    <box title="未来7日窗口期及主航道水位">
      <div class="main">
        <div class="list-wrap">
          <seamless-scroll :data="dataList" :class-option="defaultOption">
            <div class="list">
              <div class="item" v-for="(l, i) in dataList" :key="`item${i}`">
                <div class="triangle"></div>
                <div class="date">{{ l.time.slice(5) }} |</div>
                <div class="time-wrap">
                  <p
                    class="key"
                    v-for="(item, idx) in l.windowPeriods2"
                    :key="`key${idx}`"
                  >
                    {{ item.formattedTime }}
                    <span v-if="item.isNextDay" class="is-next-day"
                      >(次日)</span
                    >
                  </p>
                  <div class="val-wrap">
                    <span class="sign">≥</span>
                    <p :class="['val', { yellow: l.isSurety }]">
                      {{ l.lowestValue }}<span class="unit">m</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </seamless-scroll>
        </div>
      </div>
    </box>
  </div>
</template>
  <script>
import box from "../box.vue";
import seamlessScroll from "./seamlessScroll.vue";
import { api } from "@/api/index.js";

export default {
  components: {
    box,
    seamlessScroll,
  },
  data() {
    return {
      projectCode: "QJDQ",
      defaultOption: {
        step: 0.1, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        waitTime: 10000, // 单步运动停止的时间(默认值1000ms)
      },
      dataList: [],
    };
  },
  mounted() {
    this.getBestTransPeriod();
  },
  methods: {
    async getBestTransPeriod() {
      const { projectCode } = this;
      const dateType = "1"; // 0-本日 1-未来5日
      const res = await api.getBestTransPeriod(dateType);
      console.log("未来5日", res);
      const { data } = res[1];
      data.forEach((l) => {
        const { lowestValue, windowPeriods } = l;
        l.isSurety = lowestValue < 1.3;
        l.windowPeriods2 = this.handleWindowPeriods(windowPeriods);
      });
      this.dataList = data;
      console.log("未来5日 data", data);
    },
    handleWindowPeriods(windowPeriods) {
      const arr = [];
      console.log("windowPeriods", windowPeriods);
      if (!windowPeriods) return;
      windowPeriods.forEach((l) => {
        const times = l.split(" ~ ");
        const startTime = times[0].split(" ")[1];
        const endTime = times[1].split(" ")[1];

        // 判断是否跨越到第二天
        const isNextDay = startTime > endTime;

        // 格式化时间
        const formattedStartTime = startTime.substring(0, 5);
        const formattedEndTime = endTime.substring(0, 5);
        const formattedTime = isNextDay
          ? `${formattedStartTime}-${formattedEndTime} 次日`
          : `${formattedStartTime}-${formattedEndTime}`;

        arr.push({
          formattedTime: `${formattedStartTime}-${formattedEndTime}`,
          isNextDay,
        });
      });
      return arr;
    },
  },
};
</script>
  <style scoped lang='scss'>
.next-week {
  margin-bottom: vh(20px);
  .main {
    height: vh(458px);
    padding: vh(20px) vw(20px);
    overflow: hidden;
    .list-wrap {
      height: vh(411px);
      overflow: hidden;
      .item {
        height: vh(76px);
        background: rgba(37, 186, 222, 0.1);
        border-bottom: 1px solid #25bade;
        margin-bottom: vh(8px);
        color: #fff;
        padding-left: vw(27px);
        padding-right: vw(27px);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
        .triangle {
          width: vh(10px);
          height: vh(10px);
          background: red;
          position: absolute;
          top: vh(6px);
          left: vh(6px);
          background: url("~@/assets/waterLevel/矩形6.png");
          background-size: 100% 100%;
          background-position: center center;
          background-repeat: no-repeat;
        }

        .date {
          font-family: D-DIN-PRO;
          font-size: vh(18px);
          color: #dafdff;
          padding-top: vh(8px);
        }
        .time-wrap {
          display: flex;
          justify-content: space-between;
          align-items: center;
          p {
            margin: 0;
          }
          .key {
            font-family: D-DIN-PRO;
            font-size: vh(24px);
            color: #dafdff;
          }
          .is-next-day {
            font-size: vh(16px);
          }
          .val-wrap {
            display: flex;
            align-items: center;
            .sign {
              font-family: Microsoft YaHei;
              font-size: vh(20px);
              color: #dafdff;
              margin-right: vw(10px);
            }
            .val {
              font-family: D-DIN-PRO;
              font-weight: bold;
              font-size: vh(30px);
              color: #49efff;
              .unit {
                font-size: vh(18px);
                color: #49efff;
                margin-left: vw(2px);
                font-weight: normal;
              }
            }
            .yellow {
              color: #dafdff;
              background: linear-gradient(0deg, #ffffff 0%, #ffe8a1 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
      }
    }
  }
}
</style>
  